<template>
  <div id="averageTimeSpent">
    <div class="item-box" v-for="(item, index) in numberData" :key="index">
      <p class="text">
        {{ item.text }}
        <span class="colorYellow">({{item.unit}})</span>
      </p>
      <div class="d-flex justify-content-center">
        <dv-digital-flop class="dv-digital-flop" :config="item.number" />
      </div>
    </div>
  </div>
</template>

<script>
import bus from "@/bus";
import { getUnitCalItemsWithNoAuthorization } from "@/api/UnitCalculate";
import config from "@/config";
import { getLast24HoursRange } from "@/utils/dateUtil";
export default {
  data() {
    return {
      numberData: [
        {
          number: { number: [0.00], toFixed: 2, textAlign: 'center', content: '{nt}', style: { fontSize: 24 }},
          text: '平均摘机用时',
          unit: '秒'
        },
        {
          number: { number: [0.00], toFixed: 1, textAlign: 'center', content: '{nt}', style: { fontSize: 24 }},
          text: '平均受理用时',
          unit: '秒'
        },
        {
          number: { number: [0.00], toFixed: 1, textAlign: 'center', content: '{nt}', style: { fontSize: 24 }},
          text: '平均急救反应用时',
          unit: '分钟'
        }
      ],
      standardData: {
        beginDateTime: '',
        endDateTime: '',
        calItems: [
          {
            calName: "平均摘机用时",
            dataIndex: "PJZJYS",
            dataCategory: 2,
            valueCategory: 1,
            avg: true,
            unit: 1
          },
          {
            calName: "平均受理用时",
            dataIndex: "PJSLYS",
            dataCategory: 2,
            valueCategory: 1,
            avg: true,
            unit: 1
          },
          {
            calName: "平均反应用时",
            dataIndex: "PJFYYS",
            dataCategory: 2,
            valueCategory: 1,
            avg: true,
            unit: 60
          }
        ],
        screens: [
          {
            ref: "EPAIAREA_CODE",
            checkIden: "EPAIAREA_CODE_1",
            rlevantData: {
              iden: "EPAIAREA_CODE_1",
              filterType: 2,
              value: [
                {
                  value: config.xzbm,
                  xzbm: config.xzbm
                }
              ]
            }
          }
        ]
      }
    }
  },
  created() {
    this.fetchData()
    // 监听全局刷新事件
    this.refreshHandler = () => {
      console.log("定时刷新：AverageTimeSpent")
      this.fetchData();
    }
    bus.$on('refresh-all-data', this.refreshHandler)
  },
  methods: {
    async fetchData() {
      const { beginDateTime, endDateTime } = getLast24HoursRange();
      this.standardData.beginDateTime = beginDateTime;
      this.standardData.endDateTime = endDateTime;
      const res = await getUnitCalItemsWithNoAuthorization(this.standardData);
      if (res.code === 200 && res.isSuccess) {
        try {
          const entityList = JSON.parse(res.entity);
          if (entityList && entityList.length > 0) {
            const unitCallItem = entityList[0];
            this.numberData = [
              {
                number: {
                  number: [Number(unitCallItem.PJZJYS) || 0.00],
                  toFixed: 2,
                  textAlign: 'center',
                  content: '{nt}',
                  style: {fontSize: 24}
                },
                text: '平均摘机用时',
                unit: '秒'
              },
              {
                number: {
                  number: [Number(unitCallItem.PJSLYS) || 0.00],
                  toFixed: 2,
                  textAlign: 'center',
                  content: '{nt}',
                  style: {fontSize: 24}
                },
                text: '平均受理用时',
                unit: '秒'
              },
              {
                number: {
                  number: [Number(unitCallItem.PJFYYS) || 0.00],
                  toFixed: 2,
                  textAlign: 'center',
                  content: '{nt}',
                  style: {fontSize: 24}
                },
                text: '平均急救反应用时',
                unit: '分钟'
              }
            ]
          } else {
            this.numberData = [
              {
                number: {number: [0.00], toFixed: 2, textAlign: 'center', content: '{nt}', style: {fontSize: 24}},
                text: '平均摘机用时',
                unit: '秒'
              },
              {
                number: {number: [0.00], toFixed: 2, textAlign: 'center', content: '{nt}', style: {fontSize: 24}},
                text: '平均受理用时',
                unit: '秒'
              },
              {
                number: {number: [0.00], toFixed: 2, textAlign: 'center', content: '{nt}', style: {fontSize: 24}},
                text: '平均急救反应用时',
                unit: '分钟'
              }
            ]
          }
        } catch (e) {
          console.error('entity 解析失败', e);
        }
      }
    }
  },
  beforeDestroy() {
    bus.$off('refresh-all-data', this.refreshHandler)
  }
}
</script>

<style lang="scss" scoped>
#averageTimeSpent {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;

  .item-box {
    font-size: 14px;
    color: #d3d6dd;
    text-align: center;
    width: 31%;

    .dv-digital-flop {
      width: 120px;
      height: 30px;
      margin: 0 auto;
    }

    .colorYellow {
      color: yellowgreen;
    }
  }
}
</style>
